<template>
  <container>
    <el-space wrap>
      <el-input v-model="userParams.userName" placeholder="请输入用户名称"></el-input>
      <el-input v-model="userParams.phone" placeholder="请输入用户手机号"></el-input>
      <el-button :icon="Refresh" type="success" @click="refresh">刷新</el-button>
      <el-button :icon="Search" type="primary" @click="_getDatas">搜索</el-button>
    </el-space>
    <div class="mt-20 mb-20">
      <el-button type="primary" :icon="Plus">添加用户</el-button>
      <el-button type="danger" plain :icon="Delete" :disabled="checkList.length <= 0">批量删除</el-button>
    </div>
    <el-table v-loading="loading" :data="userList" border @select-row="selectChange">
      <el-table-column type="selection" align="center" fixed />
      <el-table-column label="描述文本" min-width="240">
        <template #default> 这里有一段描述文本这里有一段描述文本这里有一段描述文本 </template>
      </el-table-column>
      <el-table-column label="姓名" prop="name" width="120" />
      <el-table-column label="手机号" prop="phone" width="150" />
      <el-table-column label="是否在线" width="120">
        <template #default="{ row }">
          <div class="statusbox" :class="{ online: row.online === '1' }">
            <dots :color="row.online === '1' ? '#22c55e' : '#ef4444'" style="margin-right: 4px" />
            <span> {{ row.online === '1' ? '在线' : '离线' }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="评级" width="170">
        <template #default="{ row }">
          <el-rate :model-value="row.level" disabled />
        </template>
      </el-table-column>
      <el-table-column label="开关" width="100">
        <template #default="{ row }">
          <el-switch v-model="row.switch" style="--el-switch-off-color: #f56c6c" />
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" width="100">
        <template #default="{ row }">
          <el-tag :type="row.status" effect="dark">{{ row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="time" min-width="200" />
      <el-table-column label="操作" align="center" width="240" fixed="right">
        <template #default="{ row }">
          <el-button type="success" text size="small" :icon="DocDetail">查看</el-button>
          <el-button type="primary" text size="small" :icon="Edit">编辑</el-button>
          <el-button type="danger" text size="small" :icon="Delete">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-model:limit="userParams.pageSize"
      v-model:page="userParams.pages"
      :total="total"
      @pagination="_getDatas" />
  </container>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { Delete, DocDetail, Edit, Plus, Refresh, Search } from '@icon-park/vue-next';
import dots from '@/components/dots/main.vue';
import container from '@/components/container';
import { getDatas } from '@/mocks/data';

const userList = ref<any[][]>([]);
const checkList = ref([]);
const total = ref(0);
const userParams = ref({
  pageSize: 10,
  pages: 1,
  userName: '',
  phone: ''
});
const loading = ref(false);

function _getDatas() {
  loading.value = true;
  getDatas(userParams.value).then((res) => {
    userList.value = res.data;
    total.value = res.total;
    loading.value = false;
  });
}

function selectChange(row) {
  checkList.value = row;
}

function refresh() {
  userParams.value.pages = 1;
  userParams.value.phone = '';
  userParams.value.userName = '';
  _getDatas();
}

_getDatas();
</script>

<style scoped lang="scss">
.dialog-content {
  padding: 10px;
}
</style>
